<template>
  <div
    id="device-tree"
    class="dtree-wrap"
    :class="!showTabs ? 'deviceTree' : ''"
  >
    <template v-if="showDeviceIndex">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane :label="$t('用户分组')" name="first">
          <div class="ctl-box" v-show="showTabs">
            <bs-add-icon
              class="hover-effect"
              @click.native="addTreeNode"
            ></bs-add-icon>
            <bs-remove-icon
              class="hover-effect"
              @click.native="removeTreeNode"
            ></bs-remove-icon>
            <bs-edit-icon
              class="hover-effect"
              @click.native="editTreeNode"
            ></bs-edit-icon>
            <bs-refresh-icon
              class="hover-effect shuaxin"
              @click.native="refreshNode"
            ></bs-refresh-icon>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('组织结构')" name="second" v-if="showDeviceIndex">
          <!-- <div class="ctl-box" v-show="showTabs">
              <bs-add-icon class="hover-effect"></bs-add-icon>
              <bs-remove-icon class="hover-effect"></bs-remove-icon>
              <bs-edit-icon class="hover-effect"></bs-edit-icon>
              <bs-setting-icon class="hover-effect"></bs-setting-icon>
              <bs-refresh-icon class="hover-effect" @click.native="refreshNode"></bs-refresh-icon>
            </div> -->
        </el-tab-pane>
      </el-tabs>
    </template>
    <template v-else>
      <div class="main-title">{{ $t('用户组织结构') }}</div>
    </template>
    <div v-show="activeName == 'first'" :class="firstAction? '' : 'no-ctl'" class="tree-box">
      <bs-tree
        ref="userTree"
        :default-props="userProps"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        :show-checkbox="false"
        :draggable="false"
        :filter-visible="false"
        :context-menu-visible="false"
        :context-menu-data="contextMenuData"
        :data="treeData"
        :highlight-current="true"
        @node-click="nodeClick"
      ></bs-tree>
    </div>
    <div style="flex: 1; margin-top:0px" v-show="activeName == 'second'" :class="secondAction? '' : 'no-ctl'" class="tree-box">
      <bs-tree
       
        ref="orgTree"
        :default-props="orgProps"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        :show-checkbox="false"
        :draggable="false"
        :filter-visible="false"
        :context-menu-visible="false"
        :context-menu-data="contextMenuData"
        :data="orgData"
        :highlight-current="true"
        @node-click="nodeClick"
      ></bs-tree>
    </div>
  </div>
</template>
<script>
// import DeviceTreeAddDialog from './DeviceTreeAddDialog'
// import DeviceTagDialog from './DeviceTagDialog'
// import MediaMonitorApi from '@/api/media'
import $, { map } from 'jquery'
// import {createNamespacedHelpers} from 'vuex'
// const { mapGetters, mapActions } = createNamespacedHelpers('media')

export default {
  data() {
    return {
      treeNode: {},
      treeNodeData: {},
      activeName: 'first',
      userProps: {
        children: 'sysUserGroup',
        label: 'name',
      },
      orgProps: {
        children: 'childUser',
        label: 'username',
      },
      treeData: [],
      orgData: [],
      defaultTreeData: {},
      defaultCheckedKeys: [],
      defaultExpandedKeys: [1, '-1'],
      contextMenuData: [],
    }
  },
  props: {
    showTabs: {
      type: Boolean,
      default: true,
    },
    showDeviceIndex: {
      type: Boolean,
      default: true,
    },
    showMinType: {
      type: String,
      default: '1',
    },
    haveData: {
      type: Boolean,
      default: false,
    },
     firstAction:{
      type:Boolean,
      default:true,
    },
    secondAction:{
      type:Boolean,
      default:false,
    },
  },
  components: {},
  // computed: {
  //   ...mapGetters(['tagTree'])
  // },
  mounted() {
    this.$nextTick(() => {
      this.initTree()
    })
  },
  methods: {
    initTree() {
      if (this.showDeviceIndex) {
        this.activeName = 'first'
        this.loadTreeData()
      } else {
        this.activeName = 'second'
        this.loadOrgTree()
      }
    },
    //获取所有用户组
    loadTreeData() {
      console.log('loadTreeData----loadTreeData----------')
      let params = {}
      this.$store.dispatch('system/loadUserGroup', params).then((res) => {
        this.treeData = res
        this.updateSelectNode()
      })
    },
    //获取组织架构数据
    loadOrgTree() {
      this.orgData = [
        {
          childUser: [],
          id: '-1',
          username: '所有用户',
        },
      ]
      let params = { groupLevel: 1 }
      this.$store.dispatch('system/loadUserOrg', params).then((res) => {
        this.orgData[0].childUser = res
      })
    },

    refreshNode() {
      if (this.activeName == 'first') {
        console.log('refreshNode----loadTreeData----------')
        this.loadTreeData()
      } else {
        this.loadOrgTree()
      }
    },
    // 点击节点
    nodeClick(data, node, obj) {
      console.log('nodeClick----------------', data)
      this.treeNodeData = data
      this.treeNode = node
      this.$eventBus.$emit('doLoadList', data)
    },
    // 添加节点
    addTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert(this.$t('提示'), this.$t('请选择一个用户分组节点'))
        return
      }
      let params = {
        level: this.treeNodeData.level + 1,
        parentId: this.treeNodeData.id,
      }
      this.$prompt(this.$t('添加分组'), this.$t('请输入分组名称')).then((data) => {
        if (data) {
          params.name = data
          this.$store.dispatch('system/addUserGroup', params).then((res) => {
            this.refreshNode()
          })
        }
      })
    },
    // 编辑节点
    editTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert(this.$t('提示'), this.$t('请选择一个用户分组节点'))
        return
      }
      if (this.treeNodeData.level == 1) {
        this.$alert(this.$t('提示'), this.$t('此目录不可操作'))
        return
      }
      let params = {
        id: this.treeNodeData.id,
        level: this.treeNodeData.level,
        parentId: this.treeNodeData.parentId,
      }
      this.$prompt(this.$t('分组名修改'), this.treeNodeData.name).then((data) => {
        if (data) {
          params.name = data
          this.$store.dispatch('system/updateUserGroup', params).then((res) => {
            this.refreshNode()
          })
        }
      })
    },
    // 删除节点
    removeTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert(this.$t('提示'), this.$t('请选择一个用户分组节点'))
        return
      }
      if (this.treeNodeData.level == 1) {
        this.$alert(this.$t('提示'), this.$t('此目录不可操作'))
        return
      }
      let params = {
        id: this.treeNodeData.id,
      }
      this.$confirm(this.$t('提示'), this.$t('是否确定删除')).then((bool) => {
        if (bool) {
          this.$store.dispatch('system/delUserGroup', params).then((res) => {
            if (res) {
              this.$success('del')
              //  刷新节点  更新选中
              this.refreshNode()
            }
          })
        }
      })
    },
    updateSelectNode() {
      this.$nextTick(() => {
        let first_level_id = 0
        this.treeData.forEach(item => {
          if(item.level === '1') {
            first_level_id = item.id
            return
          }
        })
        this.$refs.userTree.$refs.tree.setCurrentKey(first_level_id)
        const node = this.$refs.userTree.$refs.tree.getNode(first_level_id)
        this.treeNodeData = node.data
        this.$eventBus.$emit('doLoadList', this.treeNodeData)
      })
    },
    // 点击tab页
    doClickTree(treeItem) {
      this.treeNodeData = treeItem
    },

    handleClick(tab, event) {
      this.treeNodeData = {}
      this.currentNode = {}
      if (Number(tab.index) === 0) {
        this.showUser = true
        if (this.showTabs) $('#device-tree').removeClass('deviceTree')
        this.loadTreeData()
      } else if (Number(tab.index) === 1) {
        this.showUser = false
        $('#device-tree').addClass('deviceTree')
        // this.treeData = this.tagTree
        this.loadOrgTree()
      }
      console.log('handleClick -----------', this.activeName)
    },
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.deviceTree {
  width: 100%;
  .el-tabs--border-card {
    border: 0 !important;
  }
  ::v-deep .el-tabs--border-card .el-tabs__content {
    border: 0 !important;
    padding: 0 0 2px 0;
  }
}
.ctl-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-x: hidden;
  border-bottom: 1px solid $bg-dc;
  padding-bottom:12px;
}
.shuaxin {
  color: red；;
}
::v-deep .el-tabs--border-card .el-tabs__content {
  padding: 12px 0 0px 0;
}
.dtree-wrap {
  // overflow-x: scroll;
  ::v-deep .el-tabs__item {
    padding: 0 !important;
    width: 125px;
    text-align: center;
  }
  ::v-deep .el-tabs__item:last-child {
    border-right: 0 !important;
  }
}

.tree-box {
  width: 248px;
  height: calc(100vh - 200px);
  overflow: auto;

  .tree {
    height: 100%;
    ::v-deep .el-tree {
      min-width: 100%;
      display: inline-block !important;
    }
  }

  &.no-ctl {
    height: calc(100vh - 160px);
    .tree {
      height: 100%;
      ::v-deep .el-tree {
        min-width: 100%;
        display: inline-block !important;
      }
    }
  }
}
</style>